<template>
  <div class="chart-container">
    <div class="days">
      <div v-for="week in weeks">{{ week }}</div>
      <div v-for="date in dates">{{ date }}</div>
      <div v-for="dayWeather in dayWeatherArr">{{ dayWeather }}</div>
      <div v-for="dayPower in dayPowerArr">风力 {{ dayPower }}级</div>
    </div>
    <v-chart :option="option"></v-chart>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useWeatherStore } from '@/stores/weather.js'

import { getWeek, renderOption } from '@/utils'

const store = useWeatherStore()
const { chartWeatherDays } = storeToRefs(store)
// console.log(ipWeatherDays.value)
const weeks = ref([])
const dates = ref([])
const dayWeatherArr = ref([])
const dayPowerArr = ref([])
const option = ref({})
const daytemp = ref([])
const nighttemp = ref([])
watch(chartWeatherDays, () => {
  //   console.log(ipWeatherDays.value)

  getWeek(chartWeatherDays)
  //   console.log(ipWeatherDays.value)

  //   dates.value.push(ipWeatherDays.value.forEach((item) => item.date))
  dates.value = chartWeatherDays.value.map((item) => item.date.substring(5))
  //   console.log(dates.value)
  dayWeatherArr.value = chartWeatherDays.value.map((item) => item.dayweather)
  dayPowerArr.value = chartWeatherDays.value.map((item) => item.daypower)
  daytemp.value = chartWeatherDays.value.map((item) => item.daytemp)
  nighttemp.value = chartWeatherDays.value.map((item) => item.nighttemp)
  option.value = renderOption(daytemp.value, nighttemp.value)
})

// onMounted(() => {
//   getWeek(chartWeatherDays)
//   //   console.log(ipWeatherDays.value)

//   //   dates.value.push(ipWeatherDays.value.forEach((item) => item.date))
//   dates.value = chartWeatherDays.value.map((item) => item.date.substring(5))
//   //   console.log(dates.value)
//   dayWeatherArr.value = chartWeatherDays.value.map((item) => item.dayweather)
//   dayPowerArr.value = chartWeatherDays.value.map((item) => item.daypower)
//   daytemp.value = chartWeatherDays.value.map((item) => item.daytemp)
//   nighttemp.value = chartWeatherDays.value.map((item) => item.nighttemp)
//   option.value = renderOption(daytemp.value, nighttemp.value)
// })
</script>

<style lang="scss" scoped>
.chart-container {
  display: flex;
  flex-direction: column;
  //   width: 100%;
  background: #004e71;
  height: 300px;
  border-radius: 4px;
  padding: 40px 48px;
  .days {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    color: #fff;
    text-align: center;
  }
}
</style>
